<template>
  <div class="min-h-screen p-8">
    <div class="max-w-7xl mx-auto">
      <!-- 页面标题 -->
      <div class="text-center mb-12">
        <h1
          class="text-4xl font-bold text-white mb-4 [text-shadow:_0_0_3px_black]"
        >
          项目展示
        </h1>
        <p class="text-xl text-white/80 [text-shadow:_0_0_2px_black]">
          💁🏿平时空闲时间做的一些小项目
        </p>
      </div>
      <!-- 项目列表 -->
      <div class="grid grid-cols-1  md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="project in projectList" :key="project.id">
          <ProjectCardItem :cardInfo="project"></ProjectCardItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { projectsType } from "~/type";
const { data } = await useApiFetch("/newapi/project");
// 项目数据
const projectList = ref<projectsType>([]);
projectList.value = data.value?.data;
projectList.value?.map((item: any) => (item.imgUrl = item.avatar.url));
</script>

<style scoped>
.perspective-1000 {
  perspective: 1000px;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}
</style>
